<template>
  <div class="full-box bar01">
    <v-chart class="chart" :option="chartOption" autoresize />
  </div>
</template>

<script>
import {graphic} from 'echarts'
import vChart from 'vue-echarts'
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import {getBaseChartOption} from "@/package/widget/chart/01base/util";

export default {
  name: 'bar01',
  cnName: 'bar01',
  mixins: [refreshMixin],
  components: {vChart},
  props: {
    option: Object
  },
  data() {
    return {
      chartOption: {},
      cptData: {}
    }
  },
  methods: {
    loadDataOk() {
      const attribute = this.option.attribute
      const opt = getBaseChartOption(attribute)
      const series = []
      const {legends = [], names, values, stacks} = this.cptData // deconstructData(this.cptData, {type: 'bar'})

      console.info('legends:', this.cptData)

      legends.forEach((item, i) => {
        const stack = attribute.isStack && stacks[item] || ''
        series.push({
          showBackground: attribute.series.showBackground,
          barWidth: attribute.series.barWidth,
          label: {
            ...attribute.series.label
          },
          itemStyle: {
            ...attribute.series.itemStyle
          },
          name: item,
          type: 'bar',
          stack,
          data: values[i] || []
        })
      })

      // 渐变色
      if(attribute.colorRange.show) {
        const colors = attribute.colorRange.colors
        const len = colors.length
        if(len > 0) {
          series.forEach((item, index) => {
            const color = colors[index % len]
            item.itemStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: color[0] },
              { offset: 0.4, color: color[1] },
              { offset: 1, color: color[2] }
            ])
          })
        }
      }

      opt.legend.data = legends
      // 竖向
      if(attribute.direction === '0') {
        opt.xAxis.data = names
        opt.xAxis.type = 'category'
        opt.yAxis.data = []
        opt.yAxis.type = 'value'
      } else {
        opt.xAxis.data = []
        opt.xAxis.type = 'value'
        opt.yAxis.data = names
        opt.yAxis.type = 'category'
      }
      opt.series = series


      this.chartOption = opt
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadDataOk(newVal)
      },
      deep: true
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>

</style>
